<template>
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @input="onSearch"
      @cancel="$router.back()"
    />
    <van-cell-group v-for="item in citylist" :key="item.value">
      <van-cell @click="$router.push({path:'/gozuhome',query:item})" :title="item.communityName" />
    </van-cell-group>
  </form>
</template>

<script>
import { getAreaName } from '@/api/home'
export default {
  name: 'SearchCity',
  data () {
    return {
      value: '',
      citylist: [],
      falg: false // 防抖
    }
  },
  methods: {
    onSearch (val) {
      // 节流阀为真停止发送请求
      if (this.falg) return
      // 发送一次请求之后为真
      this.falg = true
      setTimeout(async () => {
        // 搜索
        const { body } = await getAreaName({
          name: val,
          id: this.$store.state.home.cityId.value
        })
        this.citylist.push(...body)
        // 搜索框没有值的时候清空
        if (!val) this.citylist = []
        // 请求结束后赋值为假
        this.falg = false
      }, 500)
    },
    goForm (item) {

    }
  }
}
</script>

<style>
</style>
